<template>
  <view>
    <u-popup
        mode="bottom"
        bg-color="rgba(0,0,0,0)"
        @close="close"
        :show="show"
    >
      <view class="popup-box">
        <view class="popup-title">{{ $i18n.zhToGlobal("国际区号") }}</view>
        <view class="popup-input-box">
          <input
              type="text"
              v-model="keyword"
              @input="filter()"
              :placeholder="$i18n.zhToGlobal('请输入关键字')"
              class="popup-input"></input>
        </view>
        <view style="height: 20rpx"></view>
        <view class="menu-box">
          <scroll-view
              scroll-y
              style="height: calc(100vh - 600rpx)">
            <view v-for="(item,index) in listFilter"
                  @click="select(item)"
                  class="menu-line">
              <view>{{ item.name }}</view>
              <view class="menu-box-code">{{"+"}}{{ item.phoneAreaCode }}</view>
            </view>
          </scroll-view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      list: [],
      keyword: '',
      listFilter: [],
    };
  },
  created() {
    this.getAll();
  },
  mounted() {
  },
  methods: {
    open() {
      this.show = true;
    },
    close() {
      this.show = false;
    },
    select(item) {
      this.$emit('select', item);
      this.close();
    },
    /**
     * 筛选
     */
    filter() {
      this.listFilter = this.list.filter((item) => {
        if (!this.keyword) {
          return true;
        }
        return item.name.toUpperCase().indexOf(this.keyword.toUpperCase()) !== -1
            || "+"+(item.phoneAreaCode).toUpperCase().indexOf(this.keyword.toUpperCase()) !== -1
            || item.stateAreaCode.toUpperCase().indexOf(this.keyword.toUpperCase()) !== -1;
      });
    },
    getAll() {
      this.$kt.request.send({
        uri: '/tool-area-web/toolPhoneArea/getAll',
        method: 'POST',
        stateSuccess: (res) => {
          this.list = res.data;
          for (let i = 0; i < this.list.length; i++) {
            this.list[i].name = this.$i18n.toGlobal(this.list[i].stateAreaCode, "stateArea");
          }
          // 按照phoneAreaCode的unicode排序
          this.list.sort((a, b) => {
            return a.phoneAreaCode.localeCompare(b.phoneAreaCode);
          });
          this.filter();
        },
      });
    }

  }
}
</script>

<style lang="scss" scoped>
.popup-box {
  background-color: #fff;
  padding: 20rpx;
  border-radius: 20rpx 20rpx 0 0;

  .popup-title {
    font-size: 32rpx;
    color: #303133;
    text-align: center;
    padding: 20rpx 0;
    font-weight: bold;
  }

  .popup-input-box {
    padding: 20rpx;
    background-color: #f5f5f5;
    border-radius: 20rpx;

    .popup-input {
      width: 100%;
      height: 60rpx;
      border: none;
      outline: none;
      background-color: #f5f5f5;
      font-size: 28rpx;
    }
  }
}

.menu-box {
  padding: 20rpx;

  .menu-line {
    padding: 40rpx 20rpx 40rpx 20rpx;
    text-align: left;
    font-size: 28rpx;
    border-bottom: 1rpx solid #f0f0f0;
    border-radius: 10rpx;
  }

  .menu-line:active {
    background-color: #f5f5f5;
  }

  .menu-box-code {
    margin-top: 10rpx;
    color: #999;
  }
}
</style>
